<template>
  <div class="main-layout" :class="{hide: hide === 'true'}">
    <div class="sidebar">
      <nav class="nav-wrapper">
        <img class="vtm" src="@/assets/nav-logo.png" alt="">
        <span class="ml10">大闸蟹溯源系统</span>
      </nav>
      <el-menu
        :collapse="hide === 'true'"
        @select="handleSelect"
        :default-active="activeRoute"
        class="el-menu-vertical-demo"
        :background-color="variables.menuBg"
        :text-color="variables.menuText"
        :unique-opened="true"
        :active-text-color="variables.menuActiveText">
        <el-menu-item index="/main/home">
          <i class="el-icon-s-home"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-s-data"></i>
            <span>信息采集</span>
          </template>
          <el-menu-item v-for="item in menuList" :key="item.path" :index="item.path">
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-link"></i>
            <span>信息溯源</span>
          </template>
          <el-menu-item index="/main/ticketCheck">
            <span slot="title">蟹券查询</span>
          </el-menu-item>
          <el-menu-item index="/main/ringCheck">
            <span slot="title">蟹扣查询</span>
          </el-menu-item>
          <el-menu-item index="/main/listQuery">
            <span slot="title">列表查询</span>
          </el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-s-cooperation"></i>
            <span>参与者管理</span>
          </template>
        </el-submenu>
      </el-menu>
    </div>
    <div class="content">
      <div class="header">
        <span class="vtm handle-collapse" @click="handleCollapse">
          <i v-if="hide === 'true'" class="el-icon-s-unfold"></i>
          <i v-else class="el-icon-s-fold"></i>
        </span>
        <span class="ml10">当前身份: {{ userType }}</span>
        <div class="user-info ml10">
          <el-dropdown @command="command">
            <span class="el-dropdown-link">
              <i class="el-icon-user-solid"></i>
              {{ $store.state.app.userName }}
              <i class="el-icon-caret-bottom ml10"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="main-wrapper">
        <transition name="fade-transform" mode="out-in">
          <router-view />
        </transition>
      </div>
    </div>
  </div>
</template>
<script>
import variables from '@/styles/variables.scss'

export default {
  name: 'LayOut',
  computed: {
    variables () {
      return variables
    }
  },
  data () {
    let hide = sessionStorage.getItem('collapse') || 'false'
    // if (typeof hide === 'string') {
    //   hide = hide === 'true'
    // }
    const activeRoute = this.$route.path
    let userType = '生产者'
    let menuList = [
      {
        title: '网箱信息',
        path: '/main/dashboard',
        icon: 'el-icon-menu'
      },
      {
        title: '水质信息',
        path: '/main/waterList',
        icon: 'el-icon-menu'
      },
      {
        title: '投放信息',
        path: '/main/launchList',
        icon: 'el-icon-menu'
      },
      {
        title: '打捞信息',
        path: '/main/catchList',
        icon: 'el-icon-menu'
      },
      {
        title: '蟹券信息',
        path: '/main/ticketList',
        icon: 'el-icon-menu'
      }
    ]
    if (this.$store.state.app.userName === 'examiner') {
      userType = '检查者'
      menuList = [
        {
          title: '检查信息',
          path: '/main/dashboard',
          icon: 'el-icon-menu'
        }
      ]
    }
    if (this.$store.state.app.userName === 'buyer') {
      userType = '收购者'
      menuList = [
        {
          title: '收购信息',
          path: '/main/dashboard',
          icon: 'el-icon-menu'
        }
      ]
    }
    if (this.$store.state.app.userName === 'consumer') {
      userType = '消费者'
      menuList = [
        {
          title: '概览',
          path: '/main/dashboard',
          icon: 'el-icon-menu'
        },
        {
          title: '图片概览',
          path: '/main/gallery',
          icon: 'el-icon-picture-outline-round'
        },
        {
          title: '消费信息',
          path: '/main/consumerList',
          icon: 'el-icon-s-shop'
        }
      ]
    }
    return {
      userType,
      hide,
      activeRoute,
      menuList
    }
  },
  methods: {
    handleSelect (value) {
      this.$router.push(value)
    },
    handleCollapse () {
      this.hide = this.hide === 'true' ? 'false' : 'true'
      this.$store.dispatch('app/toggleCollapse', this.hide)
      sessionStorage.setItem('collapse', this.hide)
    },
    command (name) {
      if (name === 'logout') {
        sessionStorage.removeItem('userName')
        this.$router.push('/login')
      }
    }
  }
}
</script>
<style lang="scss">
.el-menu {
  border-right: none;
}
</style>
<style lang="scss" scoped>
.vtm {
  vertical-align: middle;
}
.main-layout {
  height: 100%;
  display: flex;
  flex-flow:row;
  &.hide {
    .sidebar {
      width: 64px;
    }
    .content {
      width: calc(100% - 64px);
    }
  }
  .sidebar {
    width: 200px;
    height: 100%;
    background: rgb(48, 65, 86);
    transition: width ease-in-out .3s;
    .nav-wrapper {
      padding: 0 15px;
      overflow: hidden;
      height: 50px;
      line-height: 50px;
      background: #2b2f3a;
      font-size: 16px;
      color: #fff;
    }
  }
  .content {
    height: 100%;
    width: calc(100% - 200px);
    .header {
      width: 100%;
      height: 50px;
      padding: 0 10px;
      font-size: 14px;
      background: white;
      align-items: center;
      line-height: 50px;
      border-bottom: 1px solid rgba($color: #000000, $alpha: .1);
      box-shadow: 0 2px 4px rgba($color: #000000, $alpha: .1);
      display: flex;
      .user-info {
        margin-left: auto;
      }
    }
    .handle-collapse {
      font-size: 18px;
      cursor: pointer;
    }
    .main-wrapper {
      width: 100%;
      height: calc(100% - 50px);
      overflow-y: auto;
      background: #f2f6f8;
    }
  }
}
</style>
